<template>
  <!-- 流程图  当员工时候不显示，审核人是老板时候显示-->
  <view class="auditProcess">
    <view class="title">打卡记录</view>
    <!-- 日考勤 -->
    <u-steps dot direction="column" :current="dates" class="stepbox" activeColor="#0038F7" inactiveColor="#EFEFEF"
      v-if="status == 1">
      <u-steps-item v-for="(item, index) in  stepList " :key="index">
        <template #desc>
          <view class="status">
            <view class="status_left">
              <view class="names">{{ item.type == 1 ? '上班打卡' : '下班打卡' }}
                <text class="position">{{ item.clocking_time.split(' ')[1] || '' }}</text>
              </view>
              <view class="date">{{ item.remark }}</view>
            </view>
            <view class="status_right">
              <button class="taster " :class="item.status == 1 || item.status == 4 ? 'green' : 'yellow'">
                {{ item.clockStatus }}
              </button>

            </view>

          </view>
        </template>
      </u-steps-item>
    </u-steps>
    <!-- 周考勤 -->
    <view v-if="status == 2">
      <view class="att_item" v-for="(item, index) in  stepList " :key="index">
        <view class="day_date">
          {{ item.date }}
        </view>
        <u-steps dot direction="column" :current="dates" class="stepbox" activeColor="#0038F7" inactiveColor="#EFEFEF">
          <u-steps-item v-for="(item, index) in  item.list " :key="index">
            <template #desc>
              <view class="status">
                <view class="status_left">
                  <view class="names">{{ item.type == 1 ? '上班打卡' : '下班打卡' }}
                    <text class="position">{{ item.clocking_time.split(' ')[1] || '' }}</text>

                  </view>
                  <view class="date">{{ item.address }}</view>
                </view>
                <view class="status_right">
                  <button class="taster " :class="item.status == 1 || item.status == 4? 'green' : 'yellow'">
                    {{ item.clockStatus }}
                  </button>
                </view>

              </view>
            </template>
          </u-steps-item>
        </u-steps>
      </view>
    </view>
    <!-- 月考勤 -->
    <view v-if="status == 3">
      <view class="att_item" v-for="(item, index) in  stepList " :key="index">
        <view class="day_date">
          {{ item.date }}
        </view>
        <u-steps dot direction="column" :current="dates" class="stepbox" activeColor="#0038F7" inactiveColor="#EFEFEF">
          <u-steps-item v-for="(item, index) in  item.list " :key="index">
            <template #desc>
              <view class="status">
                <view class="status_left">
                  <view class="names">{{ item.type == 1 ? '上班打卡' : '下班打卡' }}
                    <text class="position">{{ item.clocking_time.split(' ')[1] || '' }}</text>

                  </view>
                  <view class="date">{{ item.address }}</view>
                </view>
                <view class="status_right">
                  <button class="taster " :class="item.status == 1 || item.status == 4? 'green' : 'yellow'">
                    {{ item.clockStatus }}
                  </button>
                </view>

              </view>
            </template>
          </u-steps-item>
        </u-steps>
      </view>
    </view>
  </view>
</template>

<script setup>

const props = defineProps({
  stepList: {
    type: Array,
    default: ''
  },
  dates: {
    type: Number,
    default: ''
  },
  status: {
    type: Number,
    default: '1'
  },
  showDate: {
    type: String,
    default: 'false'
  }
})

</script>

<style scoped lang="scss">
.auditProcess {
  border-top: 1rpx solid #EFEFEF;

  .title {
    height: 90rpx;
    line-height: 90rpx;
    color: $uni-text-color;
    font-weight: $uni-font-weight;
    font-size: 34rpx;
    position: relative;
    margin-bottom: 20rpx;

    &::after {
      width: 92rpx;
      height: 14rpx;
      content: '';
      position: absolute;
      bottom: 23%;
      z-index: 9;
      left: 3%;
      border-radius: 10rpx;
      background-color: rgba(0, 56, 247, 0.5);
    }
  }

  .day_date {
    color: $uni-text-color;
    font-weight: 500;
    font-size: 22rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
  }

  .status {
    display: flex;
    justify-content: space-between;
    min-height: 140rpx;
    padding-left: 20rpx;

    .status_left {
      width: 70%;
      margin-left: 20rpx;

      .names {}

      .name {
        color: $uni-text-color;
        font-weight: 500;
       font-size:$uni-font-size-26;

        .position {
          color: #999999;
          font-weight: 500;
          font-size: 22rpx;
          margin-left: 10rpx;
        }

        .gray {
          color: #999999;
          font-weight: 500;
          font-size: 22rpx;
          margin-left: 10rpx;
        }
      }

      .date {
        font-family: PingFangSC;
        color: #999999;
        font-weight: 500;
        font-size: $uni-font-size-sm;
        margin-top: 10rpx;
      }
    }

    .status_right {
      .taster {
        border: none;
        width: 104rpx;
        height: 40rpx;
        font-family: PingFangSC;
        font-weight: 500;
        font-size: 22rpx;
        border-radius: 18rpx;
        line-height: 40rpx;
        padding: 0;

        &::after {
          border: none;
        }
      }

      .yellow {
        color: #F77704;
        background: #FEF3E6;
      }

      .green {
        color: #17A500;
        background: #EAFEE6;
      }

      .red {
        color: #FEE6E6;
        background: #FF0000;
      }
    }
  }
}
</style>